<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新交房物业费明细</title>
    <style>
        body{
            margin: 0;
            background-color: #eee;
        }
        header{
            background-color: white;
            padding: 10px ; 
        }

        .chunk{
            width: 80%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            margin: 20px auto;
            padding: 10px 15px;
            border-radius: 5px;
        }
        .chunk1{
            width: 80%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            margin: 0 auto;
            padding: 1px 15px;
            border-radius: 5px;
        }
        .head-portrait{
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .chunk-left{
            display: flex;
        }
        .name-time{
            /* display: inline-block; */
            margin-left: 5px;
        }
        .name-time div{
            margin: 3px 0;
        }
       
        .chunk-room-left {
            width: 35%;
        }

        .chunk-room-right {
            width: 70%;
            display: flex;
            justify-content: space-between;
            color: rgb(174, 175, 175);
        }
         .confirmBtn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #1E90FF;
            text-align: center;
            margin: 30px auto;
            color: white;
            border-radius: 10px;
        }
        .bottom{
            z-index:100;
            width:100%;
            left:0%;
            position:fixed;
            bottom:0px;
            display: flex;
            
            background-color: rgb(255, 255, 255);
        }
        .bottom-money{
            width:60%;
            text-align: center;
            height:48px;
            line-height: 48px
        }
        .bottom-confirm{
            width:40%;
            text-align:center;
            height:48px;
            line-height: 48px;
            color:#fff;
            background-color: rgb(0, 140, 255);
        }
        .addressMessage{
            width:90%;
            margin:0 auto;
            background-color: white;
            display: flex;
            align-items: center;
            border-top: solid 1px rgb(238, 235, 235);
            border-bottom: solid 1px rgb(238, 235, 235);
            margin-bottom: 40rpx;
        }
        .addressMessage image{
            
            margin: 10px;
        }
    </style>
</head>
<body>
    <form  id="form1">
    <main>
        <div class="addressMessage">
            <image src="static/admin2/images/room.png" style="width: 40px;height: 40px;margin:30px" />
            <div>
                房号:{$roominfo.address}<br/>
                姓名:{$roominfo.owner_name}
               
            </div>

                
        </div>


        <input type="hidden" name="out_room_id" value="{$roominfo.out_room_id}"/>
        <input type="hidden" name="cashier_id" value="{$cashier_id}"/>
        <input type="hidden" name="room_address" value="{$roominfo.address}"/>
        <input type="hidden" name="community_id" value="{$roominfo.community_id}"/>
        <input type="hidden" name="community_name" value="{$roominfo.community_name}"/>
        
        {volist name="billlist" id="vol"}
            <div style="width: 80%;justify-content: space-between;align-items: center;background-color: white;margin: 0px auto;padding: 10px 15px;border-radius: 5px;margin-top:10px;border-bottom: 1px solid #ccc">{$vol.costtype}</div>
            {volist name="vol.billinfo" id="vo"}
            <div class="chunk1">
                    <div class="chunk-left">
                        <div class="name-time">
                            <div style="font-size:13px"> <input type="checkbox" name="billid[{$vo.id}]" value="{$vo.id}" onclick="moneysum()" checked/>{$vo.acct_period}</div>
                        </div>
                    </div>
                        
                    <div >
                        ￥<span style="">{$vo.bill_entry_amount}</span>
                    </div>
            </div>
            {/volist}
        {/volist}
        
        <!--<div class="chunk" style="background-color: #eee">
            <input type="button" class="confirmBtn" value="确认缴费"    style="margin:0 auto;" onclick="createOrder()"/>
        </div>-->
        <div style="height:60px;"></div>
        <div style="height:60px;text-align:center;font-size:12px">缴费完成请到支付宝首页”卡包“中领取电子发票</div>
        <div class="bottom">
            <div class="bottom-money">
            合计: ￥<span style="color:red" id="ordermoney">{$billsum}</span>
            </div>
            <div class="bottom-confirm" onclick="createOrder()">
                立即支付
            </div>
        </div>
    </main>
    </form>
</body>
</html>
<script src="static/index/js/jquery.js"></script>
<script type="text/javascript">
    function createOrder(){
         var form = new FormData(document.getElementById("form1"));
          $.ajax({
                url:"{:url('cashiercreateOrder')}",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(r){
                    
                    if (r.order_no) {
                        tradePay(r.order_no)
                    }else{
                        alert(r.info)
                        location.reload()  
                    }
                },
                error:function(e){
                    alert("错误！！");
                    
                }
        });            
    }

    function moneysum(){
        var form = new FormData(document.getElementById("form1"));
          $.ajax({
                url:"{:url('moneysum')}",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(r){
                
                    if (r.state=="1") {
                        document.getElementById('ordermoney').innerHTML=r.info
                    }else{
                        alert(r.info);
                        location.reload()  
                    }
                },
                error:function(e){
                    
                    
                }
        });    
    }

        // 由于js的载入是异步的，所以可以通过该方法，当AlipayJSBridgeReady事件发生后，再执行callback方法
    function ready(callback) {
         if (window.AlipayJSBridge) {
             callback && callback();
         } else {
             document.addEventListener('AlipayJSBridgeReady', callback, false);
         }
    }

    function tradePay(tradeNO) {
        ready(function(){
             // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)
             AlipayJSBridge.call("tradePay", {
                  tradeNO: tradeNO
             }, function (data) {
                 if ("9000" == data.resultCode) {
                     //"http://p.alipay.com/P/ZnbM272z"
                     window.location.href='https://ur.alipay.com/5vtLsbQvGV9tOo9Qtq0t9';
                 }
             });
        });
    }
</script>